<template>
	<view class="coupon">
		<scroll-view scroll-y="true" style="height: 100vh;">
			<view class="coupon-top">
				<view class="coupon-top-left">
					<view class="title">
						福利抢先购
					</view>
					<view class="title-1">
						超高性价比买就送
					</view>
					<view class="title-2">
						品质服务 / 老牌可靠
					</view>
					<view class="title-3">
						平台合作加油站可使用
						<u-icon @click="ticketPopup" name="question-circle" color="#fff" size="16">
						</u-icon>
					</view>
				</view>
				<view class="coupon-top-right">
					<img class="top-img" src="@/static/home/car.png" alt="">
				</view>
			</view>
			<view class="content-box" v-if='couponData.length > 0'>
				<view class="coupon-content" v-for="(item,index) in couponData" :key="item.id">
					<view class="content-top" @click="toDetail(item.id)">
						<view class="content-left">
							<view class="content-price">
								￥<text>{{item.price}}</text>
							</view>
							<view class="">
								抢价值
							</view>
							<view class="content-amount">
								￥<text>{{item.amount}}</text>券
							</view>
						</view>
						<view class="content-right">
							<img class="content-img" src="@/static/home/gun.png" alt="">
						</view>
					</view>
					<view class="content-bottom">
						<view class="bottom-button" @click="toPay(item.id)">
							去购买
						</view>
						<view class="bottom-text">
							<view class="conntent-text">{{item.subtitle}}</view>
							<text v-if="item.volume !== 0">已售{{item.volume}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="content-box" v-else style='width: 100%;padding-top:40rpx;text-align: center;color:#cc2342;'>
				敬请期待……
			</view>
		</scroll-view>
		<!-- 优惠券使用规则 -->
		<uni-popup ref="ticketPopup" type="bottom" background-color="#fff">
			<view class="m-detail">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<view></view>
						<text>优惠券使用规则</text>
						<i class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;" @click="close">
						</i>
					</view>
					<view class="" style="padding: 40rpx 0;font-size: 28rpx;">
						<scroll-view scroll-y="true" style="height: 550rpx;">
							<rich-text :nodes="productRules"></rich-text>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import parseHtml from "@/utils/html-parser.js";
	import api from '@/api/home.js'
	export default {
		data() {
			return {
				couponData: '',
				productRules: "",
				province: '', //城市
				pay_way: '', //支付方式
			}
		},

		onLoad() {
			this.province = uni.getStorageSync('province').province
			this.getCouponDataApi()
			this.getComman()
		},

		methods: {
			ticketPopup() {
				this.$refs.ticketPopup.open()
			},
			close() {
				this.$refs.ticketPopup.close()
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages_order/pages/coupon-Detail/index?id=' + id
				})
			},
			getCouponDataApi() {
				let _this = this
				api.getCouponData({
					province: this.province
				}).then(res => {
					_this.couponData = res.data.data
				})
			},
			getComman() {
				api.getComman({
					alias: 'coupon_rule'
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data);
						// #ifdef MP-WEIXIN
						this.productRules = res.data.content
						// #endif
						// #ifdef MP-ALIPAY
						// 优惠券详情
						let productRules = res.data.content
						/* 处理支付宝小程序富文本显示问题 */
						this.productRules = parseHtml(productRules);
						// #endif
					}
				})
			},
			toPay(id) {
				uni.showLoading({
					title: '请稍等',
					mask: true
				});
				// #ifdef MP-WEIXIN
				this.pay_way = 1;
				// #endif

				// #ifdef MP-ALIPAY
				this.pay_way = 2;
				// #endif
				api.addCoupon({
					coupon_id: id,
					pay_way: this.pay_way
				}).then(res => {
					if (res.code == 1) {
						api.couponPay({
							coupon_order_id: res.data.order_id
						}).then(response => {
							if (response.code == 1) {
								uni.showToast({
									title: response.msg,
									icon: 'none',
									duration: 1000
								});
								// #ifdef MP-WEIXIN
								// 拉起微信支付
								uni.requestPayment({
									// ...rs.data.miniPayRequest,   // 银联
									...JSON.parse(response.data.prePayTn), // 易宝
									provider: 'weixn',
									orderInfo: res.data.order_id,
									success: () => {
										uni.hideLoading();
										uni.redirectTo({
											url: '/pages/mine/coupon/coupon'
										})
									},
									fail: () => {
										uni.hideLoading();
									}
								});
								// #endif

								// #ifdef MP-ALIPAY
								// 拉起支付宝支付
								my.tradePay({
									// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
									tradeNO: response.data.prePayTn,
									success: (res) => {
										console.log(res);
										uni.hideLoading();
										uni.redirectTo({
											url: '/pages/mine/coupon/coupon'
										})
									},
									complete: () => {
										// that.$refs.random.close();
									},
									fail: (res) => {
										console.log(res);
										uni.hideLoading();
									}
								});
								// #endif
							} else if (response.code == 101) {
								uni.showToast({
									title: response.msg,
									icon: 'none',
									duration: 1000
								});
								uni.hideLoading();
								uni.switchTab({
									url: '/pages/order/index'
								});
							};
						})
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon {
		min-height: 100vh;
		background: linear-gradient(140deg, rgba(254, 96, 112, 1), rgba(254, 96, 112, 0.1));

		// background: linear-gradient(to right,#925358,#74565F);
		.coupon-top {
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: space-between;

			view {
				width: 48%;
			}

			.coupon-top-left {
				text-align: center;

				.title {
					width: 100%;
					// color: #F7C664;
					color: #f9f7d9;
					font-size: 48rpx;
					font-weight: bold;
				}

				.title-1 {
					color: #cc2342;
					width: 100%;
					font-size: 38rpx;
					font-weight: bold;
					font-style: italic;
				}

				.title-2 {
					color: #f9f7d9;
					width: 100%;
					font-size: 30rpx;
					font-weight: bold;
				}

				.title-3 {
					color: #fff;
					width: 100%;
					font-size: 28rpx;
					display: flex;
				}

				text {
					width: 100%;
					font-size: 24rpx;
					font-weight: 400;
					color: #fff;
					line-height: 27rpx;
				}
			}

			.coupon-top-right {
				text-align: center;
				border-radius: 30rpx;
				box-shadow: 0rpx 6rpx 0 0rpx #F12F63;
			}

			.top-img {
				width: 351rpx;
				height: 165rpx;
			}
		}
	}

	.content-box {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.coupon-content {
		width: 46%;
		background: linear-gradient(to right, #FBA77B, #FD7D4B);
		margin-bottom: 40rpx;
		height: 420rpx;
		border-radius: 30rpx;
		position: relative;

		.content-img {
			position: absolute;
			right: -15rpx;
			top: 30rpx;
			width: 158rpx;
			height: 174rpx;
		}

		.content-top {
			padding: 30rpx;
			display: flex;
			position: relative;

			.content-left {
				color: #f9f7d9;

				text {
					font-size: 42rpx;
					font-weight: bold;
				}

				.content-price {
					margin-top: 30rpx;
					margin-bottom: 15rpx;
				}

				.content-amount {
					// font-weight: bold;
					color: #F12F63;
					margin-top: 15rpx;

					text {
						font-size: 48rpx;
					}
				}
			}
		}

		.content-bottom {
			position: absolute;
			bottom: 0;
			height: 130rpx;
			width: 100%;
			background: linear-gradient(to right, #FBF3D6, #c7e1f1);
			border-radius: 50rpx 50rpx 30rpx 30rpx;
			font-size: 24rpx;

			.bottom-button {
				text-align: center;
				font-size: 32rpx;
				color: #dfdfdf;
				font-weight: bold;
				width: 200rpx;
				height: 50rpx;
				border-radius: 50rpx;
				background: linear-gradient(to bottom, #F6775E, #EB3659);
				position: absolute;
				bottom: 100rpx;
				left: 50rpx;
				line-height: 50rpx;
			}

			.bottom-text {
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-end;

				.conntent-text {
					padding-top: 20rpx;
					padding-bottom: 10rpx;
					color: #F12F63;
				}
			}
		}
	}

	.m-detail {
		width: 100%;
		// height: 750rpx;
		padding-bottom: 112rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.w-center {
			.m-detail-title {
				padding-top: 30rpx;
				text-align: center;

				.prefer {
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #F12F63;
					font-size: 36rpx;
				}

				.prefer-text {
					font-size: 26rpx;
					color: #444444;
				}

				text {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1A1A1A;
				}
			}

			.table-prefer {
				border-right: 1rpx solid #858585;
			}

			.prefer-tip {
				color: #858585;

				view {
					margin-top: 30rpx;
					font-size: 24rpx;
				}
			}

			.label-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
				// padding-bottom: 40rpx;
			}

			.important {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;

				text {
					color: #F12F63;
				}
			}

			.detail-item {
				padding-bottom: 30rpx;

				view {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}

		}
	}
</style>
